.scroller {
  height: 200px;
  max-width: 380px;
  border: 1px solid;
  overflow: auto;
  scroll-timeline: --indicator;
}
.scroller ins {
  display: block;
  border-top: solid green;
  animation-name: widthExpand;
  animation-duration: 1ms;
  animation-timeline: --indicator;
  position: sticky;
  top: 0;
  z-index: 9999;
}
.scroller img {
  max-width: 100%;
  animation: scaleUp 1ms both, fadeIn 1ms both;
  animation-timeline: --scaleFade;
  view-timeline: --scaleFade;
}

.container {
  overflow: hidden;
  width: min(360px, 100%);
  resize: horizontal;
}
.container section {
  margin-block: 1em;
  padding-inline: 1em;
  border: 1px solid #ccc;
  max-height: 120px;
  overflow: hidden;
  position: relative;
}
.container section label {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 2em;
  --start-color: #0000;
  --end-color: #0002;
  background: url(../assets/svgs/arrow.svg) 50% 100%/1.5rem 1.5rem no-repeat, linear-gradient(var(--start-color), var(--end-color));
  visibility: hidden;
}

label:has(:checked) {
  rotate: 180deg;
  --start-color: #0002;
  --end-color: #0000;
}

section {
  --flag: false;
  animation: setFlag 1ms;
  scroll-timeline: --detectScroll;
  animation-timeline: --detectScroll;
}
section:has(:checked) {
  max-height: none;
}

section:has(:checked) label {
  visibility: visible;
}

@keyframes scaleUp {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes widthExpand {
  from {
    width: 0%;
  }
  to {
    width: 100%;
  }
}
@keyframes setFlag {
  from, to {
    --flag: true;
  }
}
@container style(--flag: true) {
  label {
    visibility: visible;
  }
}
.btn {
  font-size: 14px;
  color: #fff;
  border: 0;
  border-radius: 4px;
  padding: 5px 20px;
  height: 40px;
  background-color: #2a80eb;
  position: relative;
  cursor: pointer;
}
.btn.loading::first-line {
  color: transparent;
}
.btn.loading::before {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  inset: 0;
  box-sizing: border-box;
  border: 2px solid;
  border-top-color: transparent;
  margin: auto;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.spin {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: conic-gradient(transparent 10%, #2a80eb 11%, white);
  margin: 20px auto;
  -webkit-mask: radial-gradient(closest-side, transparent 75%, black 76%);
          mask: radial-gradient(closest-side, transparent 75%, black 76%);
  animation: spin 2s linear infinite reverse;
}